TanStack Router
https://gyazo.com/43fc7160d682d0cb709dd75db336ee2d
型安全なfile-system based routing library
docs
github
routing定義方法が複数ある
Tanstack Routerでfile-based routing (推奨)
file-system based routingできる
Tanstack Routerでcode-based routing
Tanstack RouterでVirtual File Routes
上記2つのハイブリッド
#wip
https://zenn.dev/aishift/articles/ad1744836509dd
https://github.com/mrsekut/trial_tanstack_router
クソ雑
createRootRouteWithContext: コンテキスト付きルートルートの作成
RouterProvider: ルータープロバイダー
Link: ナビゲーションリンク
Outlet: 子ルートのレンダリング
ナビゲーション関連
useNavigate
プログラムによるナビゲーションを行う関数を返します
useLocation
現在のlocationオブジェクトを返します
useCanGoBack
ブラウザの戻るボタンが利用可能かどうかを返します
ルートマッチング関連
useMatch
現在のルートマッチオブジェクトを返します
useMatches
全てのルートマッチオブジェクトを返します
useParentMatches
親ルートマッチオブジェクトを返します
useChildMatches
子ルートマッチオブジェクトを返します
useMatchRoute
指定されたルートがマッチしているかを判定します
パラメータ・検索関連
useParams
パスパラメータを取得します
useSearch
検索パラメータを取得します
データローディング関連
useLoaderData
ルートのローダーデータを取得します
useLoaderDeps
ローダーの依存関係を取得します
コンテキスト・状態関連
useRouteContext
ルートコンテキストを取得します
useRouter
ルーターインスタンスを取得します
useRouterState
ルーターの状態を取得します
その他
useBlocker
ナビゲーションをブロックする機能を提供します
RouteApiによる型安全なHooks
getRouteApi関数を使用することで、特定のルートIDに事前バインドされた型安全なhooksを取得できます index.tsx:260 。RouteApiは以下のhooksを提供します：
useMatch
型安全なマッチ取得
useRouteContext
型安全なルートコンテキスト取得
useSearch
型安全な検索パラメータ取得
useParams
型安全なパスパラメータ取得
useLoaderData
型安全なローダーデータ取得
@tanstack/react-router-devtools
@tanstack/router-plugin